

<template>
  <div style="width:100%">
    <el-dialog v-model="dialogVisible">
      <el-button @click="gotoParent_">ToParentDir</el-button>
      <el-button @click="select">Select</el-button>
      <el-input :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)" />
      <div class="fsitems-list">
        <div v-for="(value, index) in fsItemsList" :key="index">
          <el-icon>
            <Folder v-if="value.type == 'directory'" />
            <Document v-else />
          </el-icon>
          <a v-if="value.type == 'directory'" @click="gotoSubDir_(value.name)">{{ value.name }}</a>
          <a v-else>{{ value.name }}</a>
        </div>
      </div>
    </el-dialog>
    <el-row style="width:100%">
      <el-col :span="20">
        <el-input :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
          placeholder="Please enter the desired work directory here" />
      </el-col>
      <el-col :span="4">
        <el-button @click="onOpen">...</el-button>
      </el-col>
    </el-row>

  </div>
</template>
<script setup lang="ts">
import { Folder, Document } from "@element-plus/icons-vue";
</script>

<script lang="ts">
import { defineComponent } from "vue";
import { getFSItems, gotoSubDir, gotoParentDir } from "@/api/fs";

interface FSItem {
  name: string;
  type: string;
}

export default defineComponent({
  emits: ["update:modelValue"],
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      fsItemsList: [],
    };
  },
  mounted() {
    this.getFSItems_();
  },
  methods: {
    async getFSItems_() {
      const resp = await getFSItems(this.modelValue);
      const fsItems = resp.data;
      this.fsItemsList = fsItems.fsItemsList;
      this.$emit('update:modelValue', fsItems.currentDirectory)
    },

    async gotoSubDir_(subdirName: string) {
      const resp = await gotoSubDir(this.modelValue, subdirName);
      const fsItems = resp.data;
      this.fsItemsList = fsItems.fsItemsList;
      this.$emit('update:modelValue', fsItems.currentDirectory)
    },

    async gotoParent_() {
      const resp = await gotoParentDir(this.modelValue);
      const fsItems = resp.data;
      this.fsItemsList = fsItems.fsItemsList;
      this.$emit('update:modelValue', fsItems.currentDirectory)
    },

    select() {
      // this.$emit("select-directory", this.currentDirectory);
      this.dialogVisible = false;
    },
    async onOpen() {
      await this.getFSItems_()
      this.dialogVisible = true;
    }
  },
});
</script>

<style scoped>
.fsitems-list {
  max-height: 40vh;
  overflow: scroll;
}
</style>